<template>
  <div
    class="headerImage"
    :class="[{ headerImageFocus: activeHeaderFocus }]"
    @mouseover="activeHeaderFocus = true"
    @mouseout="activeHeaderFocus = false"
  ></div>

  <div
    class="containers"
    @mouseover="activeHeaderFocus = true"
    @mouseout="activeHeaderFocus = false"
  >
    <div class="menuBar">
      <ul>
        <li v-for="(item, index) in menuList" :key="index">
          <a href="#" :class="'special' + index">{{ item }}</a>
        </li>
      </ul>
    </div>

    <div :class="[popupCss ? 'serarchBox' : 'popuCss']">
      <input
        v-model="searchContent"
        type="text"
        class="search"
        @click="changePopuCss"
      />
      <!-- 动态路由绑定 -->
      <router-link
        target="_parent"
        @click="searchAddHistory"
        :to="'searchinput/' + searchContent"
      >
        <el-icon class="searchIcon" :size="18"><Search /></el-icon>
      </router-link>
    </div>

    <div class="hisBox" v-show="!popupCss">
      <div class="boxButton">
        <p class="loseClick">历史记录</p>
        <button class="loseClick" @click="clearHistory">清空</button>
      </div>

      <div class="boxTag">
        <el-tag
          v-show="!popupCss"
          v-for="tag in searchHistory"
          :key="tag.name"
          class="mx-1 popuHistory"
          closable
          effect="light"
          type="info"
          @close="handleClose(tag)"
        >
          {{ tag }}
        </el-tag>
      </div>

      <div class="historyHot">
        <p class="bilHot">bilbil热搜</p>
        <ol>
          <li
            class="hotListLose"
            v-for="(hotList, index) in historyHotList"
            :key="index"
          >
            <p class="hotListLose">{{ hotList.content }}</p>
            <span
              class="hotPosition"
              :style="{ 'background-color': hotList.difColors }"
              >{{ hotList.status }}</span
            >
          </li>
        </ol>
      </div>
    </div>

    <div class="userMange">
      <ul>
        <li
          @mouseover="activeUserImagePopu = true"
          @mouseout="activeUserImagePopu = false"
        >
          <div v-show="activeUserImagePopu" class="userImagePopu">
            <br />
            <p class="userName">{{ this.username }}</p>
            <!-- <p class="userName">貳拾柒亿少女的梦</p> -->
            <p class="userCoin">
              <span>硬币：1230</span> <span>B币：5975</span>
            </p>
            <div class="g-progress"></div>
            <br />
            <p class="growVlaue">
              <span> 当前成长26451，距离升级LV11还需要1579 </span>
            </p>
            <div class="otherState">
              <div class="attention">
                <p>1</p>
                <p>关注</p>
              </div>
              <div class="fans">
                <p>995</p>
                <p>粉丝</p>
              </div>
              <div class="dynamic">
                <p>4</p>
                <p>动态</p>
              </div>
            </div>
            <ul>
              <li>
                <el-icon size="16"> <User /></el-icon>
                个人中心
                <span class="otherStateUl">></span>
              </li>
              <li>
                <el-icon size="16"><SetUp /> </el-icon>
                投稿管理
                <span class="otherStateUl">></span>
              </li>
              <li>
                <el-icon size="16"><Star /> </el-icon>
                推荐服务
                <span class="otherStateUl">></span>
              </li>
              <hr />
              <li class="logout" @click="loginOut">
                <el-icon><SwitchButton /> </el-icon>
                退出登录
              </li>
            </ul>
          </div>
          <div class="userImage"></div>
        </li>
        <li>
          <el-icon size="23" class="userJumpDown"><Coin /> </el-icon><br />
          <span>大会员</span>
        </li>
        <li
          @mouseover="activeMessagePopu = true"
          @mouseout="activeMessagePopu = false"
        >
          <el-icon size="23" class="userJumpDown"><Reading /></el-icon><br />
          <span>消息</span>
          <div class="messagePopu" v-show="activeMessagePopu">
            <ul>
              <li>回复我的</li>
              <li>@我的</li>
              <li>收到的赞</li>
              <li>系统消息</li>
              <li>我的消息</li>
            </ul>
          </div>
        </li>
        <li
          @mouseover="activeDynamicPopu = true"
          @mouseout="activeDynamicPopu = false"
        >
          <el-icon size="23" class="userJumpDown"><View /></el-icon><br />
          <span>动态</span>
          <el-tabs
            stretch
            v-model="activeDynamecName"
            @tab-click="handleClickDynamec"
            class="DynamicPopu"
            v-show="activeDynamicPopu"
          >
            <el-tab-pane class="DynamicPopuFont" label="视频动态" name="first"
              >视频动态</el-tab-pane
            >
            <el-tab-pane class="DynamicPopuFont" label="直播专栏" name="second"
              >直播专栏</el-tab-pane
            >
            <el-tab-pane class="DynamicPopuFont" label="状态" name="third"
              >状态</el-tab-pane
            >
          </el-tabs>
        </li>
        <li>
          <el-icon size="23" class="userJumpDown"><Star /></el-icon><br />
          <span>收藏</span>
        </li>
        <li
          @mouseover="activehistoryPopu = true"
          @mouseout="activehistoryPopu = false"
        >
          <el-icon size="23" class="userJumpDown"><Timer /></el-icon><br />
          <span>历史</span>

          <el-tabs
            v-show="activehistoryPopu"
            class="historyPopu"
            tab-position="left"
          >
            <el-tab-pane class="historyPopuFont" label="默认收藏夹"
              >默认收藏夹</el-tab-pane
            >
            <el-tab-pane class="historyPopuFont" label="稍后再看"
              >稍后再看</el-tab-pane
            >
            <el-tab-pane class="historyPopuFont" label="Javascript"
              >Javascript</el-tab-pane
            >
            <el-tab-pane class="historyPopuFont" label="红楼梦"
              >红楼梦</el-tab-pane
            >
          </el-tabs>
        </li>
        <li>
          <el-icon size="23" class="userJumpDown"><Sunrise /></el-icon><br />
          <span>创作中心</span>
        </li>
        <li>
          <div class="UPPush">
            <el-icon size="16" class="onlyUPIcon"><Upload /></el-icon>
            <span class="onlyUPFont">投稿</span>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
// 引入解析stotre传来的数据【this.$store.state.user.username】
import { mapState } from "vuex";
export default {
  name: "BHeader",
  data() {
    return {
      menuList: [
        "首页",
        "番剧",
        "直播",
        "游戏中心",
        "会员购",
        "漫画",
        "赛事",
        "下载客户端",
      ],
      searchHistory: [
        "vue3",
        "JavaScript",
        "三国杀",
        "中国奇谭",
        "今天你开心吗",
        "毛骗解析",
        "电影解说",
        "键盘推荐",
        "三国杀",
        "键盘推荐",
      ],
      historyHotList: [
        { content: "Showmake对LoL失去兴趣", status: "新", difColors: "orange" },
        { content: "我放弃了在学校开养猪场", status: "梗", difColors: "pink" },
        { content: "老板出现了暗恋的症状", status: "梗", difColors: "pink" },
        { content: "复旦MOSS团队致歉", status: "热", difColors: "red" },
        { content: "战鹰转行皮套人", status: "热", difColors: "red" },
        { content: "儿童电影看出恐怖片的感觉", status: "", difColors: "" },
      ],
      popupCss: true,
      activeHeaderFocus: false,
      searchContent: "",
      activeUserImagePopu: false,
      activeMessagePopu: false,
      activeDynamecName: "first",
      activeDynamicPopu: false,
      activehistoryPopu: false,
    };
  },
  // 点击输入框绑定事件
  mounted() {
    window.addEventListener("click", this.changePopuCss);
  },
  // 移除输入框绑定事件
  beforeDestroy() {
    window.removeEventListener("click", this.changePopuCss);
  },

  methods: {
    // 改变点击搜索框的事件
    changePopuCss(event) {
      let currentClassName = event.target.className;
      // 检测是否点击到Popu框意以外的事件判断
      if (
        currentClassName == "search" ||
        currentClassName == "popuCss" ||
        currentClassName == "boxTag" ||
        currentClassName == "boxButton" ||
        currentClassName == "loseClick" ||
        currentClassName == "el-tag__content" ||
        currentClassName ==
          "el-tag is-closable el-tag--info el-tag--light mx-1 popuHistory" ||
        currentClassName == "historyHot" ||
        currentClassName == "bilHot" ||
        currentClassName == "hotListLose" ||
        currentClassName == "hotPosition"
      ) {
        this.popupCss = false;
        this.activeHeaderFocus = true;
      } else {
        this.popupCss = true;
        this.activeHeaderFocus = false;
      }
    },
    // 清空历史记录
    clearHistory() {
      this.searchHistory = [];
    },
    // 关闭单项历史记录
    handleClose(tag) {
      this.searchHistory.splice(this.searchHistory.indexOf(tag), 1);
    },
    // 切换Tab标签
    handleClickDynamec(tab, event) {
      this.activeDynamecName = tab.props.name;
    },
    // 往搜索历史中添加新的搜索记录
    searchAddHistory(event) {
      event.stopPropagation();
      if (this.searchContent != "") {
        if (this.searchHistory.length <= 10) {
          this.searchHistory.unshift(this.searchContent);
          this.searchContent = "";
        } else {
          this.searchHistory.unshift(this.searchContent);
          this.searchContent = "";
          this.searchHistory.splice(this.searchHistory.length - 1, 1);
        }
      }
    },
    // 退出登录
    loginOut() {
      this.$store.commit("clearUser");
      this.$router.push("/blogin");
    },
  },
  computed: {
    ...mapState(["username"]),
  },
};
</script>

<style lang="scss" scoped>
.headerImage {
  float: left;
  height: 19vh;
  width: 100%;
  background: url("../../../public/images/Home/Header/headerImage.webp")
    no-repeat center 0;
  background-position: center 0;
  background-size: cover;
  cursor: pointer;
  &:before {
    height: 19vh;
    width: 100%;
    content: "";
    background: inherit;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    filter: blur(0px);
    transition: all 1s;
    box-shadow: inset 0 0 0 3000px rgba(255, 255, 255, 0);
  }
}
.headerImageFocus {
  height: 19vh;
  width: 100%;
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  filter: blur(2.2px);
  transition: all 1s;
}

.containers {
  width: 100%;
  height: 5vh;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: absolute;
  margin-top: 0.5rem;
  z-index: 999;
  .menuBar {
    width: 30%;
    ul {
      width: 100%;
      display: inline-flex;
      justify-content: space-evenly;
      li {
        &:hover {
          color: red;
          animation: jumpDonw 0.5s ease-in-out;
        }
        a {
          font-size: 1rem;
          text-decoration: none;
          font-weight: 500;
        }
      }
    }
  }
  .serarchBox {
    width: 25%;
    height: 35px;
    border-radius: 5px;
    padding: 0 0.5rem;
    position: absolute;
    top: 6px;
    left: 35%;

    .search {
      width: 96.7%;
      height: 35px;
      background-color: rgba(255, 255, 255, 0.753);
      border-radius: 5px;
      font-size: 1rem;
      outline: none;
      border: none;
      padding: 0 0.5rem;
      &:hover {
        background-color: white;
      }
    }
  }
  .popuCss {
    height: 350px;
    width: 25%;
    background-color: white;
    border-radius: 5px;
    padding: 0 0.5rem;
    position: absolute;
    left: 35%;
    top: 6px;
    transition: height 0.5s;
    .search {
      width: 96.7%;
      height: 35px;
      background-color: rgba(231, 231, 231, 0.836);
      border-radius: 5px;
      font-size: 1rem;
      outline: none;
      border: none;
      padding: 0 0.5rem;
      margin: 5px 0;
    }
    .searchIcon {
      position: absolute;
      right: 7px;
      top: 6px;
      height: 33px;
      width: 40px;
      z-index: 999;

      &:hover {
        background-color: rgba(194, 194, 194, 0.384);
      }
    }
  }

  .searchIcon {
    position: absolute;
    right: 7px;
    top: 0px;
    height: 35px;
    width: 40px;
    z-index: 999;

    &:hover {
      background-color: rgba(194, 194, 194, 0.384);
    }
  }
  .userMange {
    width: 30%;
    height: 5vh;
    ul {
      display: flex;
      margin-right: 1rem;

      li {
        padding-top: 6px;
        width: 100%;
        text-align: center;
        color: white;
        cursor: pointer;

        .userImagePopu {
          position: absolute;
          top: 5rem;
          right: 25rem;
          width: 260px;
          height: 360px;
          border-radius: 10px;
          background-color: white;
          border: 1px solid rgb(236, 236, 236);
          p {
            color: black;
            font-size: 0.75rem;
          }
          .userName {
            font-size: 1.2rem;
            margin-top: 1.5px;
          }
          .userCoin {
            margin-top: 10px;
            span {
              font-size: 5px;
              color: gray;
            }
          }
          .growVlaue {
            span {
              color: rgb(187, 187, 187);
              font-size: 10px;
            }
          }
          .g-progress {
            margin: 0 auto;
            width: 150px;
            height: 3px;
            border-radius: 25px;
            background: linear-gradient(
              90deg,
              orange,
              rgb(252, 213, 141) 70%,
              transparent 0
            );
            &::before {
              content: "LV10";
              background-color: orange;
              position: relative;
              top: -11px;
              right: 92px;
              font-size: 0.75rem;
              border-radius: 3px;
            }
            &::after {
              content: "LV11";
              background-color: rgb(201, 201, 201);
              position: relative;
              top: -11px;
              left: 92px;
              font-size: 0.75rem;
              border-radius: 3px;
            }
          }
          .otherState {
            width: 80%;
            height: 40px;
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: space-between;
            div {
              p {
                font-size: 1rem;
              }
              p:nth-child(1) {
                font-size: 1.2rem;
              }
              p:nth-child(2) {
                font-size: 0.8rem;
                color: gray;
              }
            }
          }

          ul {
            display: flex;
            flex-direction: column;
            margin: 0 auto;
            width: 80%;
            li {
              width: 80%;
              margin: 0.3rem 1rem;
              color: black;
              text-align: left;
              &:hover {
                border-radius: 5px;
                background-color: rgba(231, 231, 231, 0.548);
              }
            }
            .otherStateUl {
              font-size: 1.3rem;
              position: relative;
              top: 3px;
              left: 60px;
            }
            .logout {
              margin: 1rem 1rem;
            }
          }
        }

        &:hover > .userJumpDown {
          animation: jumpDonw 0.5s ease-in-out;
        }

        .userImage {
          margin: 0 auto;
          width: 50px;
          height: 50px;
          border-radius: 50%;
          margin-top: -3px;
          background: url("../../../public/images/Home/Header/userIcon.webp")
            no-repeat;
          background-position: center center;
          background-size: cover;
          position: relative;
          top: 0rem;
          transition: all 0.2s;
          transform: scale(0.8);
        }
        &:hover > .userImage {
          transform: scale(1.5);
          position: relative;
          top: 2.7rem;
          transition: all 0.2s;
        }

        span {
          font-size: 0.85rem;
          position: relative;
          top: -8px;
          font-weight: 500;
        }
        .messagePopu {
          position: absolute;
          width: 140px;
          height: 250px;
          top: 3rem;
          right: 20rem;
          border-radius: 10px;
          background-color: white;
          ul {
            margin-top: 5px;
            width: 100%;
            height: 95%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            li {
              height: 30px;
              color: black;
              &:hover {
                border-radius: 10px;
                background-color: rgba(231, 231, 231, 0.836);
              }
            }
          }
        }
        .DynamicPopu {
          background-color: white;
          width: 300px;
          height: 300px;
          border-radius: 10px;
          position: absolute;
          top: 3rem;
          right: 11rem;
          .DynamicPopuFont {
            color: black;
          }
        }
        .historyPopu {
          background-color: white;
          border-radius: 10px;
          position: absolute;
          top: 3rem;
          right: 5.5rem;
          width: 320px;
          height: 380px;
          padding: 1rem;
          .historyPopuFont {
            color: black;
          }
        }
        .UPPush {
          width: 95%;
          height: 3.5vh;
          margin: 0 auto;
          background-color: #fb7299;
          border-radius: 10px;
          .onlyUPIcon {
            margin: 0.51rem 0rem;
          }
          .onlyUPFont {
            position: relative;
            top: -1.7px;
            left: 1px;
          }
        }
      }
    }
  }

  .hisBox {
    width: 23%;
    height: 100px;
    display: flex;
    flex-direction: column;
    position: relative;
    top: 90px;
    left: -50px;
    .boxButton {
      width: 100%;
      margin-bottom: 0.4rem;
      p {
        float: left;
        font-size: 1rem;
      }
      button {
        float: right;
        border: none;
        font-size: 0.8em;
        background-color: white;
        cursor: pointer;
        margin: 3px 0;
      }
    }
    .boxTag {
      width: 100%;
      height: 110px;
      display: flex;
      flex-wrap: wrap-reverse;
      justify-content: space-around;

      .popuHistory {
        margin: 0.5em;
      }
    }
    .historyHot {
      width: 105%;
      height: 200px;
      margin: 0.4rem 0;

      ol {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: space-between;
        li {
          width: 37%;
          height: 40px;
          margin: 0 1.5rem;
          p {
            line-height: 40px;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            font-size: 0.85rem;
          }
          .hotPosition {
            position: relative;
            bottom: 2rem;
            left: 11rem;
            font-size: 0.5rem;
          }
        }
      }
    }
  }
}

// 以下代码为不同的列表选项添加样式
.special0 {
  color: white;
  &::before {
    content: "\273D";
    font-size: 1rem;
    position: relative;
    right: 3px;
  }
}
.special7 {
  color: white;
  &::before {
    content: "\21E9";
    font-size: 1rem;
    position: relative;
    right: 3px;
  }
}
.special1,
.special2,
.special3,
.special4,
.special5,
.special6 {
  color: white;
}
// 以上代码为不同的列表选项添加样式
@keyframes jumpDonw {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-5px);
  }
  100% {
    transform: translateY(0px);
  }
}
</style>
